
<template>
  <!-- 报销详情 -->
  <div class="ReimbursementDetail">
    <div class="side_1"></div>
    <span class="add_1">报销详情</span>
    <el-button type="info" class="btn_fanhui" icon="el-icon-back" @click="Fh">返回</el-button>
    <div class="body">
      <el-steps :active="item.currentStep" align-center class="step">
        <el-step title="发布" :description="item.createOnStr"></el-step>
        <el-step
          :title="ite.RoleName+':'+ite.state"
          :description="ite.CreateOn"
          v-for="ite in stepList"
          :key="ite.StepId"
        ></el-step>
      </el-steps>
      <el-table show-header :data="tableData" border show-overflow-tooltip>
        <el-table-column prop="date" label="发生日期" width="150" align="center"></el-table-column>
        <el-table-column prop="main" label="报销内容" align="center"></el-table-column>
        <el-table-column prop="billNum" label="单据数量" width="150" align="center"></el-table-column>
        <el-table-column prop="price" label="金额（元）" width="150" align="center"></el-table-column>
        <el-table-column prop="note" label="备注" align="center"></el-table-column>
      </el-table>
      <div style="margin-bottom: 30px;">
        <table class="table">
          <tr>
            <td style="width:149px;font-weight:700;">合计（元）</td>
            <td>{{item.priceTotal}}元</td>
          </tr>
        </table>
        <table class="table" v-if="rejectList.length>0">
          <tr v-for="item in rejectList" :key="item.id">
            <td style="width:149px;font-weight:700;">驳回时间</td>
            <td style="width:150px;">{{item.Time}}</td>
            <td style="width:150px;font-weight:700;">驳回原因</td>
            <td>{{item.Main}}</td>
            <td style="width:150px;font-weight:700;">审批人</td>
            <td style="width:150px;">{{item.Name}}</td>
          </tr>
        </table>
      </div>
      <div class="btn_bottom" v-show="shows==0">
        <el-button type="primary" size="medium" @click="caozuo(1)">确定</el-button>
        <el-button type="primary" size="medium" @click="buohui">驳回</el-button>
      </div>
      <!-- 驳回弹框 -->
      <el-dialog title="驳回" :append-to-body="true" :visible.sync="dialogVisibles" width="30%">
        <div class="color_box"></div>
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="main"
        ></el-input>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" type="primary" @click="caozuo(2)">确定</el-button>
          <el-button size="small" type="info" @click="dialogVisibles = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      dialogVisibles: false,
      tableData: [],//报销详情
      stepList: [],//报销步骤
      rejectList: [],//驳回记录
      id: 0,
      shows: 1,
      main: "",
      creater: 0,
      item: {},//获取返回集合的第一条数据，主要展示当前步骤
      Mark: 0
    }
  },
  created () {
    this.id = this.$route.query.e;
    this.shows = this.$route.query.shows;
    this.creater = JSON.parse(localStorage.getItem("message")).Id;
    this.getData()
  },
  methods: {
    Fh () {
      window.history.go(-1);
    },
    buohui () { this.dialogVisibles = true; },
    caozuo (e) {
      if (this.Mark == 0) {
        if (e == 2) { if (this.main == "") { this.$message.error("驳回事由非空"); return } }
        var obj = { itemId: this.id, main: this.main, state: e, creater: this.creater };
        var objs = JSON.stringify(obj); let the = { index: 3, jsondata: objs };
        this.Mark=1;
        axios.post("/apis/MyCenter.asmx/Examine", the).then(({ data }) => {
          var list = JSON.parse(data.d);
          if (list.flag == true) {
            this.$message.success(list.tip);
            setTimeout(() => {
              window.history.go(-1);
            }, 500);          }
          else { this.$message.error(list.tip); }
        })
      }
    },
    // 获取表格内显示数据
    getData () {
      var obj = { id: this.id };
      var objs = JSON.stringify(obj);
      let the = { index: 14, jsondata: objs };
      axios.post("/apis/MyCenter.asmx/GetData", the).then(({ data }) => {
        var list = JSON.parse(data.d);
        if (list == null) { this.$message.error("数据异常"); } else { this.tableData = list.basemess; this.stepList = list.stepList, this.rejectList = list.rejectList, this.item = list.basemess[0] }
      });
    }
  }

};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/base.scss';
.body {
  width: 98%;
  // height: 600px;
  background-color: $white;
  margin-left: 10px;
  margin-top: 40px;
  overflow: hidden;
}
.side_1 {
  width: 5px;
  height: 16px;
  background-color: $Header_color;
  margin-left: 10px;
  margin-top: 30px;
}
.add_1 {
  margin-left: 20px;
  margin-top: -20px;
  float: left;
  font-size: 18px;
  font-weight: 400;
}
.btn_fanhui {
  margin-top: -20px;
  margin-right: 20px;
  float: right;
}
.step {
  margin-top: 50px;
}
.el-table {
  width: 70%;
  margin-top: 6%;
  margin-left: 15%;
}
table,
table tr {
  height: 60px;
}
table tr td {
  border: 1px solid #e7e7e7;
  border-top: 0.5px;
  text-align: center;
}

.table {
  width: 70%;
  margin-left: 15%;
}

.elipt {
  width: 60%;
  margin-left: 15%;
}
.btn_bottom {
  margin: 50px 0;
  text-align: center;
}
</style>